{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>awesome-spider</title>
    <link rel="stylesheet" type="text/css" href="{% static 'account/css/login.css' %}">
    <link rel="icon" href="{% static 'account/img/logo.png' %}" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a81368914c.js"></script>
    <script type="text/javascript" src="{% static 'account/script/jquery-3.5.1.js' %}"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style type="text/css">
    #error .errorMsg {
        position: absolute;
        margin-left: 20rem;
        margin-top: 2rem;
        color: red;
    }
</style>

<script>
    function MD5()
    {
       let pwd = document.getElementById('password');
       pwd.value=md5(pwd.value+'awesome_spider');

    }

    $(function () {
        $("#sub_btn").click(function () {
            let username=$("#username").val();
            let password=$("#password").val();
            if(username==""||password=="")
            {
                alert("账号或密码为空");
                return false;
            }

        })

    })
</script>
<body>
<img class="wave" src="{% static 'account/img/wave.png' %}">
<div class="container">
    <div class="img">
        <img src="{% static 'account/img/bg.svg' %}">
    </div>
    <div class="login-content">
        <form action="/login.do" method="post">
            {% csrf_token %}
            <img src="{% static 'account/img/avatar.svg' %}">
            <div id="error">
                <div class="errorMsg">{{ failed }}</div>
            </div>
            <h2 class="title">欢迎登陆</h2>
            <div class="input-div one">
                <div class="i">
                    <i class="fas fa-user"></i>
                </div>
                <div class="div">
                    <h5>用户名</h5>
                    <input type="text" id="username" name="username" class="input" value="">
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="div">
                    <h5>密码</h5>
                    <input type="password" id="password" name="password" class="input" value="">
                </div>
            </div>
            <a href="/signup">注册账号</a>
            <input type="submit" onclick="MD5()" class="btn" id="sub_btn" value="登 陆">
        </form>
    </div>
</div>
<script type="text/javascript" src="{% static 'account/js/main.js' %}"></script>
</body>
</html>